<script>
import XuanHeader from '@/components/header/XuanHeader.vue' // 页头
import XuanFooter from '@/components/footer/XuanFooter.vue' // 页脚
export default {
  components: {
    XuanHeader, // 页头
    XuanFooter // 页脚
  },
  el: 'app',
  data() {
    return {
    }
  },
  watch: {
  },
  created() {
    this.loadingMethod(0, true); // 顶部进度条加载动画
  },
  mounted() {
  },
  methods: {
    /**
     * 顶部进度条加载动画
     * 
     * @param {number} time 加载使用的时间（单位：毫秒）
     * @param {boolean} status 加载完成后的状态（true:成功。false:失败）
     */
    loadingMethod(time, status) {
      this.$Loading.start(); // 进度条加载开始
      setTimeout(() => {
        if (status) {
          this.$Loading.finish(); // 进度条加载完成
        } else {
          this.$Loading.error(); // 进度条加载失败
        }
      }, time);
    },
  }
}
</script>

<template>

  <div class="index">

    <!-- 页头 -->
    <div class="header">
      <XuanHeader />
    </div>

    <!-- 界面 -->
    <div class="interface">
      <router-view v-slot="{ Component }">
        <transition name="fade" mode="out-in">
          <component :is="Component" />
        </transition>
        <!-- 顶部进度条加载动画 -->
        <!-- {{ loadingMethod(0, true) }} -->
      </router-view>
    </div>

    <!-- 页脚 -->
    <div class="footer">
      <XuanFooter />
    </div>

    <!-- 返回顶部 -->
    <div>
      <el-backtop :right="40" :bottom="40" class="mouse" />
    </div>

  </div>

</template>

<style scoped lang="less">
.index {
  min-width: 1300px;

  .header {
    // background-color: rgb(255, 255, 255);
  }

  .interface {
    min-height: 100vh;
    padding-top: 80px;
    background-color: rgb(249, 249, 249);
  }

  .footer {
    // background-color: rgb(255, 255, 255);
  }
}
</style>
